<template>
  <div style="color: cornflowerblue">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="text item">
            <el-row>
              <el-col :span="2">
                <el-row>
                  <el-col :span="24">
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >基本信息</span
                      >
                    </div>
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        margin-top: 100px;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >通知内容</span
                      >
                    </div>
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        margin-top: 200px;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >上传附件</span
                      >
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="22">
                <el-row>
                  <el-col :span="24">
                    <br />
                    <span style="color: rgb(96, 89, 234)">基本信息</span>
                    <span style="color: gray"
                      >&nbsp;&nbsp;带<span style="color: red">*</span
                      >符号为必填项</span
                    >
                    <br />
                    <br />
                    <hr />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form
                      v-loading="loading"
                      ref="elForm"
                      :model="formData"
                      :rules="rules"
                      size="mini"
                      label-width="150px"
                      label-position="left"
                    >
                      <el-col :span="24">
                        <el-form-item label="通知名称" prop="informName">
                          <el-input
                            v-model="formData.informName"
                            clearable
                            :style="{ width: '100%' }"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="通知类型" prop="DicList_ID">
                          <el-radio-group
                            v-model="formData.DicList_ID"
                            size="medium"
                          >
                            <el-radio
                              v-for="item in bnimalEthicsOptions"
                              :key="item"
                              :label="item.value"
                              >{{ item.label }}</el-radio
                            >
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item
                                style="margin-left: 0px"
                                label="项目类型"
                                prop="projecttdiclistId"
                              >
                                <el-select
                                  clearable
                                  style="width: 100%"
                                  v-model="formData.projecttdiclistId"
                                  placeholder="请选择项目类型"
                                  @change="projectrank"
                                >
                                  <el-option
                                    v-for="item in animalEthicsOptions"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  ></el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item
                                style="margin-left: 0px"
                                label="项目级别"
                                prop="projectrankdiclistId"
                              >
                                <el-select
                                  clearable
                                  style="width: 100%"
                                  v-model="formData.projectrankdiclistId"
                                  placeholder="请选择项目级别"
                                  @change="projectsourect"
                                >
                                  <el-option
                                    v-for="item in projectrankOptions"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  ></el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item
                                style="margin-left: 0px"
                                label="项目来源单位"
                                prop="projectsourcerunkId"
                              >
                                <el-select
                                  clearable
                                  style="width: 100%"
                                  v-model="formData.projectsourcerunkId"
                                  placeholder="请选择项目来源单位"
                                  @change="projectclass"
                                >
                                  <el-option
                                    v-for="item in projectsourectOptions"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  ></el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="13">
                              <el-form-item
                                style="margin-left: 0px"
                                label="项目类别"
                                prop="projectclassDiclassID"
                              >
                                <el-select
                                  clearable
                                  style="width: 100%"
                                  v-model="formData.projectclassDiclassID"
                                  placeholder="请选择项目类别"
                                >
                                  <el-option
                                    v-for="item in projecttypeOptions"
                                    :key="item"
                                    :label="item.dicValue"
                                    :value="item.id"
                                  ></el-option>
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3">
                              <i class="el-icon-search"></i>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>

                      <el-row>
                        <el-col :span="10">
                          <el-form-item label="申报起始时间" prop="startDate">
                            <el-date-picker
                             :disabled-date="BegindisabledDateFun"
                              v-model="formData.startDate"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                              placeholder="请选择申报开始时间"
                            ></el-date-picker>
                          </el-form-item> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-form-item label="申报结束时间" prop="endDate">
                            <el-date-picker
                            :disabled-date="EnddisabledDateFun"
                              v-model="formData.endDate"
                              format="YYYY年-MM月-DD日"
                              value-format="YYYY-MM-DD"
                              :style="{ width: '100%' }"
                              clearable
                              placeholder="请选择申报结束时间"
                            ></el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-col :span="24">
                        <el-form-item label="接收者类型" prop="receType_Id">
                          <el-radio-group
                            v-model="formData.receType_Id"
                            size="medium"
                          >
                            <el-radio
                              v-for="item in recetypeOptions"
                              :key="item"
                              :label="item.value"
                              >{{ item.label }}</el-radio
                            >
                          </el-radio-group>
                        </el-form-item>
                      </el-col>

                      <el-col :span="24">
                        <el-row v-if="formData.receType_Id == '2'">
                          <el-col :span="6">部门分配：</el-col>
                          <el-col :span="10">
                            <el-form-item style="margin-left: 0px" prop="id">
                              <el-select
                                v-model="intas.id"
                                style="width: 100%"
                                multiple
                                filterable
                                allow-create
                                default-first-option
                                placeholder="请选择文章标签"
                              >
                                <el-option
                                  v-for="item in DepartList"
                                  :key="item.id"
                                  :label="item.departmentName"
                                  :value="item.id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>

                            <!-- <el-cascader
                              placeholder=""
                              @change="ProjectUndertakingUnit()"
                              :options="DepartList"
                              v-model="init.projectDepartperson"
                              style="width: 80%"
                              filterable
                            ></el-cascader> -->
                          </el-col>
                        </el-row>
                      </el-col>

                      <el-col :span="24">
                        <el-row v-if="formData.receType_Id == '3'">
                          <el-col :span="3">角色分配：</el-col>
                          <el-col :span="10">
                            <el-form-item
                              style="margin-left: 0px"
                              prop="role_Id"
                            >
                              <el-checkbox-group v-model="intas.role_Id"  placeholder="请选择要通知的角色">
                                <el-checkbox
                                  v-for="item in Roleoption"
                                  :key="item.role_Id"
                                  :label="item.role_Id"
                                  >{{ item.roleName }}</el-checkbox
                                >
                              </el-checkbox-group>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-row>
                        <el-col :span="24">
                          <br />
                          <span style="color: cornflowerblue">通知内容</span>
                          <br />
                          <br />
                          <hr />
                          <el-form-item
                            label=""
                            prop="informContent"
                            style="float: left"
                          >
                            <div>
                              <E
                                class="hello"
                                ref="volWangEditor"
                                v-model="formData.informContent"
                              ></E>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-row>
                        <el-col :span="24">
                          <br />
                          <span style="color: cornflowerblue">上传文件</span>
                          <br />
                          <br />
                          <hr />
                          <el-upload
                            class="upload-demo"
                            drag
                            action="http://localhost:9991/api/tb_project_appendix/UploadImgToQiNiu"
                            style="width: 90%"
                            multiple
                            :on-success="Upic"
                          >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                              将文件拖到此处，或<em>点击上传</em>
                            </div>
                            <div class="el-upload__tip">
                              只能上传.jpg, .jpeg, .png, .gif, .doc, .docx,
                              .pdf, .xls, .xlsx , .txt文件，且不超过2MB
                            </div>
                          </el-upload>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item label="" prop="attachmentId" required>
                            <el-upload
                              ref="attachmentId"
                              :file-list="attachmentIdfileList"
                              :action="attachmentIdAction"
                              :before-upload="attachmentIdBeforeUpload"
                            >
                            </el-upload>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="8"></el-col>
                            <el-col :span="8">
                              <el-form-item size="large">
                                <el-button type="primary" @click="submitForm"
                                  >提交</el-button
                                >
                                <el-button @click="resetForm">重置</el-button>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRef, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/../src/api/http.js";
import E from "wangeditor";
//import GetDepart from "@/assembly/DepartList.vue"
import { de } from "element-plus/es/locale";
import data from "../../builder/builderData";
export default {
  //components: { GetDepart },
  props: {
    url: {
      //上传图片的url
      type: String,
      default: "",
    },
    upload: {
      //上传方法
      type: Function,
      // (file, insertImgFn) => {}
      default: null,
    },
    uploadCount: {
      //最多可以上传(图片)的数量
      type: Number,
      default: 3,
    },
    modelValue: "",
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: Number,
      default: 250,
    },
    minWidth: {
      type: Number,
      default: 650,
    },
    minHeight: {
      type: Number,
      default: 100,
    },
  },
  name: "wang-editor",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("申报名称不能为空"));
      }
      let regNum = /[^\u4E00-\u9FA5]/g;
      if (regNum.test(value)) {
        callback(new Error("只能输入中文"));
      }
      if (value.length > 255) {
        callback(new Error("超出最大长度"));
      }
      this.http
        .get(
          "api/tb_project_declaremessage/BaseInfoDeclareMassageinformName?informName=" +
            value
        )
        .then((res) => {
          console.log(res);
          if (!res.data) {
            callback(new Error("已有此申报通知名称"));
          } else {
            callback();
          }
        });
    };
    return {
      //loading: true,//加载
      bnimalEthicsOptions: [
        {
          value: "1",
          label: "普通通知",
        },
        {
          value: "2",
          label: "项目申报",
        },
      ], //通知类型
      animalEthicsOptions: [], //项目类型
      projectrankOptions: [], //项目级别
      projectsourectOptions: [], //项目来源单位
      projecttypeOptions: [], //项目类别
      recetypeOptions: [
        {
          value: "1",
          label: "所有人",
        },
        {
          value: "2",
          label: "部门",
        },
        {
          value: "3",
          label: "角色",
        },
      ], //接收者类型
      DepartList: [], //部门级联
      Roleoption: [], //角色

      intas: {
        //projectDepartperson: "", //部门
        role_Id: [], //角色
        id: [], //部门
      },
      formData: {
        informName: "", //通知名称
        DicList_ID: "1", //通知类型
        projecttdiclistId: "", //项目类型
        projectrankdiclistId: "", //项目级别ID
        projectsourcerunkId: "", //项目来源单位ID
        projectclassDiclassID: "", //项目类别ID
        startDate: "", //申报起始日期
        endDate: "", //申报结束日期
        receType_Id: "1", //接收者类型
        informContent: "", //通知说明
        creator: JSON.parse(localStorage.getItem("user")).userName,
        file: [],
        receivetype: [], //接收者类型
      },

      //富文本框
      lastHtml: "",
      change: false,
      editor: null,
      init: false,
      rules: {
        informName: [{ required: true, validator: checkAge, trigger: "blur" }],
        projecttdiclistId: [
          { required: true, message: "请选择项目类型", trigger: "change" },
        ],
        projectrankdiclistId: [
          { required: true, message: "请选择项目级别", trigger: "change" },
        ],
        projectsourcerunkId: [
          { required: true, message: "请选择项目来源单位", trigger: "change" },
        ],
        projectclassDiclassID: [
          { required: true, message: "请选择项目类别", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请输入申报开始时间", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "请输入申报结束时间", trigger: "change" },
        ],
      },
    };
  },
  created() {
    //this.DictionsryList();
    //this.receiverlist();
    this.ScourelList();
    this.Deparment();
    this.RoleList();
    //this.recevicetype();
  },
  //富文本框
  watch: {
    modelValue(newVal, val) {
      if (
        (newVal !== val &&
          this.lastHtml !== "" &&
          val === this.lastHtml &&
          this.editor.txt.html() === this.lastHtml) ||
        this.editor.txt.html() === ""
      ) {
        this.editor.txt.html(newVal);
      }
      this.lastHtml = newVal;
    },
  },
  destroyed() {
    this.editor = null;
  },
  mounted() {
    this.editor = null;
    let editor = new E(this.$refs.volWangEditor);
    this.editor = editor;
    let $this = this;
    editor.config.zIndex = 500;
    editor.config.height = this.height;
    editor.config.onchange = (html) => {
      if (!this.init && this.lastHtml === "") {
        this.lastHtml = html;
        this.init = true;
      }
      this.$emit("update:modelValue", html);
    };
    // editor.config.uploadFileName = "fileInput";
    // //设置header
    // editor.config.uploadImgHeaders = {
    //   Accept: "application/json",
    //   Authorization: this.$store.getters.getToken(),
    // };
    //上传地址
    editor.config.uploadImgServer = this.http.ipAddress + this.url;
    // console.log(editor.config.uploadImgServer);
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
      // 自定义上传
      if ($this.upload) {
        console.log("调用自定义的上传方法");
        console.log(resultFiles);
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        //有可能会上传多张图片,上传多张图片就需要进行遍历
        resultFiles.map((item) => {
          // _this.getUploadImg(item, insertImgFn);
          $this.upload(item, insertImgFn);
        });
      } else {
        let formData = new FormData();
        let nameArr = [];
        resultFiles.forEach(function (file) {
          formData.append("fileInput", file, file.name);
          nameArr.push(file.name);
        });
        if (!$this.url) {
          $this.$message.error("未配置url");
          return;
        }
        $this.http.post($this.url, formData, true).then((x) => {
          if (!x.status) {
            return $this.$message.error(x.message);
          }
          let imgs = nameArr
            .map((m) => {
              return $this.http.ipAddress + x.data + m;
            })
            .join(",");
          insertImgFn(imgs);
        });
      }
    };
    editor.create();
    editor.txt.html(this.modelValue);
  },

  methods: {
    //添加
    submitForm() {
      this.formData.informContent = this.lastHtml;
      console.log(this.formData.creator);
      debugger
      this.recevicetype();
      this.formData.receivetype = this.formData.receivetype[0];
      //console.log(this.formData)
      //console.log(this.formData.receivetype);
      this.http
        .post("/api/tb_project_declaremessage/DeclareMessageAdd", this.formData)
        .then((res) => {
          if (res.status) {
            //console.log(this.formData);
            this.$message({
              message: "申报通知添加成功",
              type: "success",
            });
            this.$router.push("/tb_project_declaremessagelist");
          }
        });
    },

    
    //字典绑定
    // DictionsryList() {
    //   this.http
    //     .get("/api/Sys_Dictionary/GetDictionaryDescList?Dic_ID=80")
    //     .then((res) => {
    // console.log(res);
    //       this.bnimalEthicsOptions = res.result.data;
    //     });

    //   this.http
    //     .get("/api/Sys_Dictionary/GetDictionaryDescList?Dic_ID=89")
    //     .then((res) => {
    // console.log(res);
    //       this.recetypeOptions = res.result.data;
    //     });
    // },
    // receiverlist() {
    //   this.http
    //     .get("/api/Sys_Dictionary/GetDictionaryDescList?Dic_ID=89")
    //     .then((res) => {
    // console.log(res);
    //       this.recetypeOptions = res.result.data;
    //     });
    // },

    //项目类型绑定
    ScourelList() {
      this.http.get("/api/tb_project_sourceinfo/GetSourceList").then((res) => {
        this.animalEthicsOptions = res.data;
      });
    },
    //项目级别绑定
    projectrank() {
      this.http
        .get(
          "/api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            this.formData.projecttdiclistId
        )
        .then((res) => {
          this.projectrankOptions = res.data;
        });
    },
    //项目来源单位绑定
    projectsourect() {
      this.http
        .get(
          "/api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            this.formData.projectrankdiclistId
        )
        .then((res) => {
          this.projectsourectOptions = res.data;
        });
    },
    //项目类别绑定
    projectclass() {
      this.http
        .get(
          "/api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            this.formData.projectsourcerunkId
        )
        .then((res) => {
          this.projecttypeOptions = res.data;
        });
    },
    //部门绑定
    Deparment() {
      this.http
        .get("api/tb_project_declaremessage/DepartmentList")
        .then((res) => {
          this.DepartList = res.data;
        });
    },

    //角色绑定
    RoleList() {
      this.http.get("api/tb_project_declaremessage/RoleList").then((res) => {
        this.Roleoption = res.data;
      });
    },

    // ProjectUndertakingUnit() {
    //   //alert(Info.projectDepartperson)
    //   console.log(this.intas.projectDepartperson);
    // },
    //上传
    Upic(val) {
      var list = {
        appendixUrl: val.filePath,
        appendixName: val.fileName,
      };
      this.formData.file.push(list);
    },
    //接收者添加
    recevicetype() {
      console.log(this.formData.receType_Id);
      //console.log(this.intas.id);
      debugger
      console.log(this.intas.role_Id);
      var list1 = {};
      if (this.formData.receType_Id == "1") {
        list1 = {
          receiverTypeId: "1",
          receiverTypeItem: "0",
        };
      }
      //console.log(list1);
      if (this.formData.receType_Id == "2") {
        list1 = {
          receiverTypeId: this.formData.receType_Id,
          receiverTypeItem: this.intas.id.toString(),
        };
        //console.log(list1);
      }
      if (this.formData.receType_Id == "3") {
        list1 = {
          receiverTypeId: this.formData.receType_Id,
          receiverTypeItem: this.intas.role_Id.toString(),
        };
        //console.log(list1);
      }
      console.log(list1);
      this.formData.receivetype.push(list1);
    },

    //判断开始时间不能小于结束时间
    BegindisabledDateFun(time) {
      if (this.formData.startDate != undefined) {
        if (time.getTime() > new Date(this.formData.endDate)) {
          return true
        } else {
          return false;
        }
      }
      if (time.getTime() < Date.now() - 8.64e7) {
        return true;
      } else {
        return false;
      }
    },
    EnddisabledDateFun(time) {
      if (this.formData.startDate != undefined) {
        if (time.getTime() < new Date(this.formData.startDate)) {
          return true;
        } else {
          return false;
        }
      } else {
        if (time.getTime() < Date.now() - 8.64e7) {
          return true;
        } else {
          return false;
        }
      }
    },
  },
};
</script>
  
  
  <style>
.ipt {
  border: none;
  outline: none;
  height: 30px;
  border-bottom: 1px solid #ccc;
}
.el-upload__tip {
  line-height: 1.2;
}
.ll {
  background-color: cornflowerblue;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-top: 5px;
}
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-bottom: 1px solid;
}
.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}
.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}
.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}
.el-header,
.el-footer {
  background-color: #cdd6e1;
  color: #333;
  text-align: center;
  line-height: 10px;
}

#editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100; /* 按需定义 */
}
#toolbar-container {
  border-bottom: 1px solid #ccc;
}
#editor-container {
  height: 500px;
}

h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.el_Select /deep/ :root {
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: none;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
    0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style)
    var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}
</style>
 